@extends('layouts.supervisor')

@section('content')

<style type="text/css">
.delegate{margin:10px;}
</style>
<div class="page-content">

	<div class="row">

		<div class="col-xs-12">

			<h3 class="header smaller lighter blue">双向选择</h3>

			<label class="col-xs-12 col-sm-12 control-label no-padding-right alert alert-block alert-success"> 

				选择您作为指导老师的学生名单

			</label>

			<div class="table-responsive">

				<table id="sample-table-2" class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th class="center"><label>选择</label></th>
							<th>学生姓名</th>
							<th class="hidden-480">学号</th>
							<th>班级</th>
							<th class="hidden-480">专业</th>
							<th>手机</th>
							<th class="hidden-480">邮箱</th>
						</tr>
					</thead>
					<tbody>
						@foreach($applicationStudents as $applicationStudent)
						<tr>
							<td class="center">
								<label>
									<input type="checkbox" class="ace supervisor" id="{{$applicationStudent->id}}" name="{{$applicationStudent->user->name}}" onclick="check({{$applicationStudent->id}})" />
									<span class="lbl"></span>
								</label>
							</td>
							<td>
								<a href="#">{{$applicationStudent->user->name}}</a>
							</td>
							<td class="hidden-480">
								{{$applicationStudent->user->username}}
							</td>
							<td>{{$applicationStudent->class}}</td>
							<td class="hidden-480">{{$applicationStudent->major}}</td>
							<td>
								{{$applicationStudent->user->phone}}
							</td>
							<td class="hidden-480">
								{{$applicationStudent->user->email}}
							</td>
						</tr>
						@endforeach
					</tbody>

				</table>

			</div>
			<div class="hr hr32 hr-dotted"></div>
			<label class="col-xs-12 col-sm-12 control-label no-padding-right alert alert-block alert-success"> 

				当前选择的学生名单

			</label>
			<div class="hr hr-18 dotted hr-double"></div>
			<div class="row">
				<div class="form-actions center delegate-list">
					<hr id="split-line">
					<button type="button" class="btn btn-sm btn-success center" onclick="document.twowayform.submit();">
						提交
						<i class="icon-arrow-right  bigger-110" ></i>
					</button>
				</div>
			</div>
			<form style="display: none" id="twowayform" name="twowayform" class="form-horizontal" method="POST" action="/supervisor/twowaychoice">
                        {{ csrf_field() }}
            </form>
		</div>

	</div>

</div>

<div id="dialog-confirm" class="hide">

	<div class="alert alert-info bigger-110">

		您之前已经确认了{{$approvedStudents->count()}}位学生，目前最多可以选择{{$supervisor->quota - $approvedStudents->count()}} 位学生！
	</div>

	<div class="space-6"></div>

</div>

<script type="text/javascript">

	jQuery(function($) {

		var oTable1 = $('#sample-table-2').dataTable( {
			"aoColumns": [
		      { "bSortable": false },
		      null, null, null, null, null, null
			],
			"oLanguage": {
			"sLengthMenu": "每页显示 _MENU_ 条记录",
			"sZeroRecords": "抱歉， 没有找到",
			"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
			"sInfoEmpty": "没有数据",
			"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
			"oPaginate": {
				"sFirst": "首页",
				"sPrevious": "前一页",
				"sNext": "后一页",
				"sLast": "尾页"
			},
			"sZeroRecords": "没有检索到数据",
			}
		 });


		$('table th input:checkbox').on('click' , function(){

			var that = this;

			$(this).closest('table').find('tr > td:first-child input:checkbox')

			.each(function(){

				this.checked = that.checked;

				$(this).closest('tr').toggleClass('selected');

			});

				

		});

		$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});

		function tooltip_placement(context, source) {

			var $source = $(source);

			var $parent = $source.closest('table')

			var off1 = $parent.offset();

			var w1 = $parent.width();

	

			var off2 = $source.offset();

			var w2 = $source.width();

	

			if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';

			return 'left';

		}

		$('#gritter-center').on(ace.click_event, function(){

			$.gritter.add({

				title: 'This is a centered notification',

				text: 'Just add a "gritter-center" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
				class_name: 'gritter-info gritter-center'
			});

	

			return false;

		});
	})

	function check(id) {
		var checkbox = $("table #" + id);
		if ($("table #" + id).prop("checked")) {
			if ($('#twowayform').children().length > {{$supervisor->quota - $approvedStudents->count()}}) {
				alert_num();
				$("table #" + id).removeAttr("checked");
				return;
			}
			$("#twowayform").append(
				"<input type='text' id ='input_" + id +  "' name='student[]' class='delegate' value='" + 
					checkbox.attr('id') + "' />");
			$("#split-line").before(
				"<button class='btn btn-primary delegate' id='btn_" + id + "'>" + 
					checkbox.attr('name') + "</button>");
		} else {
			$("#input_" + id).remove();
			$("#btn_" + id).remove();
		}

	}	

	function alert_num() {

		$( "#dialog-confirm" ).removeClass('hide').dialog({

				resizable: false,

				modal: true,

				title: "提示",

				title_html: true,

				buttons: [

					{

						html: "知道了",

						"class" : "btn btn-primary btn-xs",

						click: function() {

							$( this ).dialog( "close" );

						}

					}
				]

			});

	}
</script>



@endsection


